<template>
  <div class="order">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.go(-1)" />
    <van-tabs v-model="active" sticky>
      <van-tab name="all" title="全部">
        <div v-if="orderList.length === 0">暂无全部订单</div>
        <OrderListItem  v-for="item in orderList" :key="item.id" :item="item"></OrderListItem>
      </van-tab>
      <van-tab name="payment" title="待支付">
        <div v-if="loading">加载中...</div>
        <div v-else-if="Paylist.length === 0">暂无待支付订单</div>
        <OrderListItem v-for="item in Paylist" :key="item.id" :item="item"></OrderListItem>
      </van-tab>
      <van-tab name="delivery" title="待发货">
        <div v-if="loading">加载中...</div>
        <div v-else-if="cartlist.length === 0">暂无待发货订单</div>
        <OrderListItem v-for="item in cartlist" :key="item.id" :item="item" @cancel="changeDeliveryList"></OrderListItem>
      </van-tab>
      <van-tab name="received" title="待收货">
        <div v-if="loading">加载中...</div>
        <div v-else-if="orderList.length === 0">暂无待收货订单</div>
       <OrderListItem v-for="item in deliveryList" :key="item.id" :item="item" @finish="changeReceivedList"></OrderListItem>
      </van-tab>
      <van-tab name="comment" title="待评价">
        <div v-if="loading">加载中...</div>
        <div v-else-if="orderList.length === 0">暂无待评价订单</div>
       <OrderListItem v-for="item in finishlist" :key="item.id" :item="item"></OrderListItem>
      </van-tab>
    </van-tabs>
    <div v-if="error">{{ error }}</div>
  </div>
</template>
<script>
import OrderListItem from '@/components/OrderListItem.vue'
export default {
  name: 'OrderPage',
  components: {
    OrderListItem
  },
  data () {
    return {
      active: this.$route.query.dataType || 'all',
      cartlist: [],
      orderList: [],
      Paylist: [],
      list: [],
      deliveryList: [],
      finishlist: [],
      money: 0,
      page: 1, // 页码从 1 开始
      token: '',
      loading: false,
      error: null,
       intervalId: null // 存储定时器 ID
    }
  },
  methods: {
   getList() {
    this.finishlist=JSON.parse(localStorage.getItem('finishList')) || []
    this.cartlist=JSON.parse(localStorage.getItem('cartlist')) || []
    this.deliveryList=JSON.parse(localStorage.getItem('deliveryList')) || []
    this.Paylist=JSON.parse(localStorage.getItem('buyNowPaylist')) || []
    this.list=JSON.parse(localStorage.getItem('buyNowlist')) || []
     if(this.list.length>0){
       this.cartlist=this.cartlist.concat(this.list)
       localStorage.setItem('cartlist',JSON.stringify(this.cartlist))
       localStorage.removeItem('buyNowlist')
     }
    },
    getOrderlist() {
       if(this.cartlist.length>0){
        this.orderList=this.orderList.concat(this.cartlist) 
       }
       if(this.Paylist.length>0){
        this.orderList=this.orderList.concat(this.Paylist)
       }
       if(this.deliveryList.length>0){
        this.orderList=this.orderList.concat(this.deliveryList) 
       }
       if(this.finishlist.length>0){
        this.orderList=this.orderList.concat(this.finishlist) 
       }
       localStorage.setItem('orderList',JSON.stringify(this.orderList))
    },
    gettimestamp(){
      this.getList()
      if(this.cartlist.length>0){
         // 获取当前时间戳
          const timestamp = Date.now()
          console.log(timestamp);
           // 遍历购物车列表，检查时间戳是否超过 10 分钟
          for (let i = 0; i < this.cartlist.length; i++) {
              if (timestamp - this.cartlist[i].timestamp >= 600000) {
                   // 如果超过 10 分钟，将其添加到 deliveryList 中
                   this.cartlist[i].status='已发货'
                   this.deliveryList.push(this.cartlist[i])
                   this.cartlist.splice(i, 1) // 删除已处理的元素
                   i-- // 调整索引，因为删除了一个元素
                   localStorage.setItem('cartlist',JSON.stringify(this.cartlist))
                   localStorage.setItem('deliveryList',JSON.stringify(this.deliveryList))
                  }
          }
      }
    },
    changeDeliveryList(item){
      this.cartlist=this.cartlist.filter(i=>i.id!==item.id)
       this.money+=item.price*item.num
      localStorage.setItem('money',this.money)
      localStorage.setItem('cartlist',JSON.stringify(this.cartlist))
    },
    changeReceivedList(item){
      this.deliveryList=this.deliveryList.filter(i=>i.id!==item.id)
      localStorage.setItem('deliveryList',JSON.stringify(this.deliveryList))
      item.status='已完成'
      item.date=new Date().toLocaleString()
      this.finishlist.push(item)
      localStorage.setItem('finishList',JSON.stringify(this.finishlist))
    }
},
watch: {
   
},
created() {
     this.money=+(localStorage.getItem('money'))
     this.gettimestamp()
     this.getOrderlist()
     this.intervalId = setInterval(this.gettimestamp, 60000); // 每分钟执行一次
  }
}
</script>

<style lang="less" scoped>
.order {
  background-color: #fafafa;
}
.van-tabs {
  position: sticky;
  top: 0;
}
</style>